import React from 'react'
import { useNavigate } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import { Button, Select } from 'antd'
import { GlobalOutlined } from '@ant-design/icons'
// 引入语言切换包
import ywen from '../../../locales/yw.json'
import zwen from '../../../locales/zh.json'

i18n.use(initReactI18next).init({
  resources: {
    en: { translation: ywen },
    zh: { translation: zwen }
  },
  fallbackLng: 'zh',
  interpolation: {
    escapeValue: false
  }
})

const CurrentLanguage: React.FC = () => {
  const navigate = useNavigate()
  const { t } = useTranslation()

  const handleLanguageChange = (value: string) => {
    i18n.changeLanguage(value)
  }

  return (
    <div className='language-container'>
      <Button 
        className='home-button' 
        onClick={() => navigate('/home')}
        type="text"
      >
        {t("text")}
      </Button>
      <Select
        value={i18n.language}
        onChange={handleLanguageChange}
        className='language-select'
        suffixIcon={<GlobalOutlined />}
        options={[
          { value: 'en', label: 'English' },
          { value: 'zh', label: '中文' }
        ]}
      />
    </div>
  )
}

export default CurrentLanguage
